<template>
<!--    <div class="delete-container">-->
<!--        <h2 class="delete-title">删除购物车项</h2>-->
<!--        <div class="input-group">-->
<!--            <label for="cartItemId">购物车项ID:</label>-->
<!--            <input type="text" id="cartItemId" v-model="cartItemId" required>-->
<!--        </div>-->
<!--        <button class="delete-button" @click="deleteCartItem">删除</button>-->
<!--        <p v-if="message" class="message">{{ message }}</p>-->
<!--        &lt;!&ndash; 添加返回按钮 &ndash;&gt;-->
<!--        <button @click="goBack">返回</button>-->p
<!--    </div>-->
</template>

<script setup>
// import { ref } from 'vue';
// import { useRouter } from 'vue-router';
// import axios from 'axios';
//
// const cartItemId = ref('');
// const message = ref('');
// const router = useRouter();
//
// const deleteCartItem = async () => {
//     try {
//         const response = await axios.delete(`/cartItem/${cartItemId.value}`);
//         message.value = response.data.message;
//     } catch (error) {
//         message.value = '删除失败';
//     }
// };
//
// // 返回上一页面的方法
// const goBack = () => {
//     router.back();
// };
</script>

<style scoped>
.delete-container {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.delete-title {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

.input-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.input-group label {
    margin-bottom: 5px;
    color: #666;
}

.input-group input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.delete-button {
    width: 100%;
    padding: 10px;
    background-color: #ff4d4f;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.delete-button:hover {
    background-color: #f5222d;
}

.message {
    text-align: center;
    margin-top: 20px;
    color: #ff4d4f;
}

/* 可以添加返回按钮的样式 */
button {
  width: 100%;
    padding: 10px;
    background-color: red;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    margin-top: 10px;
}

button:hover {
  background-color:  #f5222d;
}
</style>